<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div id="capsuleBarChart" style="width:100%;height:350px"></div>
    <script>
      //柱条的颜色，每个柱条颜色不同
      var lineColor=["#9999FF","#0066FF","#33FFFF","#33FF00","#FFFF00","#FF9900","#FF3300"]
     var mychart=this.$echarts.init(document.getElementById("capsuleBarChart"))
     var option={
        tooltip: {//item和line搭配，将实现鼠标放置柱条上即可显示提示框，无阴影或者线条
          trigger: 'item',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            splitLine:{//坐标轴在grid区域的分割线
              show:false
            },
            axisLabel:{
              show:false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: ['数学', '语文', '英语', '化学', '地理', '生物', '历史'],
            inverse:true,//数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false
            }
          },
          {
            type: 'category',
            data: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
            inverse:true,//数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false//不显示y轴的线
            },
            axisLabel:{
              textStyle:{
                fontSize:12,
                color:"#fff"
              }
            }
          }
        ],
        series: [
          {
            name: '及格人数',
            type: 'bar',
            yAxisIndex:0,
            data: [10, 52, 20, 33, 39, 80, 50],
            barWidth:'20%',//柱条的宽度
            label:{
              show:true,
              formatter:function(params){//柱条上的文字
                return params.data+"%";
              }
            },
            itemStyle:{
              borderRadius:5,//圆角
              color:function(params){
                return lineColor[params.dataIndex]
              }
            },
          },
          {
            name: '',
            type: 'bar',
            yAxisIndex:1,//使两个柱状图重合的效果
            barWidth: '30%',
            data: [100, 100, 100, 100, 100,100, 100],
            label:{
              show:false
            },
            itemStyle:{
              color:"none",
              borderColor:"#00c1de",
              borderWidth:2,
              borderRadius:5,//圆角
            },
          }
        ]       
      }
      mychart.setOption(option,true)
    </script>
</body>

</html>